<template>
  <div class="app-container home">
    <!-- 顶部：项目简介 -->
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h2>译智 - 计算机知识分享交流平台</h2>
        <p>
          “译智”是一款专注于计算机技术的知识分享与学习社区。我们致力于为大学生和技术爱好者提供一个高质量、易交流的平台，在这里，你可以分享学习笔记、发布技术文章、与同行交流心得，共同探索编程世界的奥秘。
        </p>
        <p>
          <el-button type="primary" size="mini" icon="el-icon-edit" plain @click="goToCreate">开始创作</el-button>
          <el-button size="mini" icon="el-icon-collection" plain @click="goToLibrary">浏览知识库</el-button>
        </p>
      </el-col>

    </el-row>

    <el-divider />

    <!-- 中间：平台核心功能 -->
    <div class="platform-core">
      <!-- Banner 轮播图 -->
      <el-carousel height="300px" class="banner">
        <el-carousel-item v-for="item in 3" :key="item">
          <img class="banner-img" :src="`https://picsum.photos/seed/tech${item}/1200/300.jpg`" alt="Banner" />
          <div class="banner-text">
            <h2>从C语言到分布式系统</h2>
            <p>陪你走过大学四年的编程之路</p>
          </div>
        </el-carousel-item>
      </el-carousel>

      <!-- 技术方向分类 -->
      <div class="section">
        <el-tabs v-model="activeTab" class="category-tabs" @tab-click="handleTabChange">
          <el-tab-pane label="全部" name="all" />
          <el-tab-pane label="计算机基础" name="cs-basics" />
          <el-tab-pane label="前端开发" name="frontend" />
          <el-tab-pane label="后端开发" name="backend" />
          <el-tab-pane label="移动开发" name="mobile" />
          <el-tab-pane label="人工智能" name="ai" />
          <el-tab-pane label="网络安全" name="security" />
          <el-tab-pane label="数据库" name="database" />
        </el-tabs>
      </div>

      <!-- 知识卡片瀑布流 -->
      <div class="knowledge-list">
        <el-row :gutter="20">
          <el-col v-for="knowledge in knowledgeList" :key="knowledge.id" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-card class="knowledge-card" shadow="hover" @click.native="goToDetail(knowledge.id)">
              <img :src="knowledge.coverUrl" class="card-img" />
              <div class="card-content">
                <h3 class="card-title">{{ knowledge.title }}</h3>
                <p class="card-author">作者：{{ knowledge.author }}</p>
                <div class="card-stats">
                  <span><i class="el-icon-view"></i> {{ formatCount(knowledge.viewCount) }}</span>
                  <span><i class="el-icon-star-on"></i> {{ knowledge.likeCount }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-divider />

    <!-- 底部：联系信息与更新日志 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>联系信息</span>
          </div>
          <div class="body">
            <p><i class="el-icon-s-promotion"></i> 官网：<el-link href="https://ykyb.xyz/" target="_blank">https://ykyb.xyz/</el-link></p>
            <p><i class="el-icon-chat-dot-round"></i> QQ：<a href="javascript:;">1846124292</a></p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">

      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>捐赠支持</span>
          </div>
          <div class="body">
            <img src="@/assets/images/pay.png" alt="donate" width="100%" />
            <span style="display: inline-block; height: 30px; line-height: 30px">你可以请作者喝杯咖啡表示鼓励</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.9.0",
      // 首页数据
      activeTab: 'all',
      knowledgeList: []
    };
  },
  mounted() {
    this.fetchKnowledgeList();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    // 获取知识列表
    fetchKnowledgeList() {
      // 这里应该是你的API调用，例如: listKnowledge().then(response => { this.knowledgeList = response.data; });
      // 现在我们用模拟数据
      const mockData = [
        { id: 1, title: "《深入理解计算机系统》读书笔记", author: "李学长", coverUrl: "https://picsum.photos/seed/csapp/300/200.jpg", viewCount: 3210, likeCount: 210 },
        { id: 2, title: "Vue3 + Vite + TypeScript 项目实战", author: "前端小王", coverUrl: "https://picsum.photos/seed/vue3/300/200.jpg", viewCount: 5890, likeCount: 451 },
        { id: 3, title: "MySQL索引优化详解（附案例）", author: "DBA老张", coverUrl: "https://picsum.photos/seed/mysql/300/200.jpg", viewCount: 4150, likeCount: 320 },
        { id: 4, title: "常见排序算法（Java实现）", author: "算法爱好者", coverUrl: "https://picsum.photos/seed/algorithm/300/200.jpg", viewCount: 6700, likeCount: 580 },
        { id: 5, title: "Spring Security 权限管理实战", author: "后端架构师", coverUrl: "https://picsum.photos/seed/springsecurity/300/200.jpg", viewCount: 2500, likeCount: 190 },
        { id: 6, title: "Python爬虫：从入门到反爬", author: "爬虫哥", coverUrl: "https://picsum.photos/seed/python/300/200.jpg", viewCount: 8100, likeCount: 690 },
        { id: 7, title: "TCP/IP协议族详解", author: "网络工程师", coverUrl: "https://picsum.photos/seed/tcpip/300/200.jpg", viewCount: 1900, likeCount: 150 },
        { id: 8, title: "Docker容器化部署指南", author: "运维达人", coverUrl: "https://picsum.photos/seed/docker/300/200.jpg", viewCount: 4600, likeCount: 380 },
        { id: 9, title: "React Hooks 深入浅出", author: "React开发者", coverUrl: "https://picsum.photos/seed/react/300/200.jpg", viewCount: 5500, likeCount: 420 },
        { id: 10, title: "数据结构与算法（C++版）", author: "ACM选手", coverUrl: "https://picsum.photos/seed/dsacpp/300/200.jpg", viewCount: 7200, likeCount: 610 }
      ];
      this.knowledgeList = mockData;
    },
    // 格式化数字
    formatCount(count) {
      if (count >= 1000) {
        return (count / 1000).toFixed(1) + 'k';
      }
      return count;
    },
    // 事件处理
    handleTabChange(tab) {
      console.log('切换到分类:', tab.name);
      // TODO: 实现分类筛选逻辑
      this.fetchKnowledgeList();
    },
    goToDetail(id) {
      console.log('跳转到知识详情页, ID:', id);
      // TODO: 实现跳转逻辑
      this.$router.push(`/kb-library/detail/${id}`); // 示例路由
    },
    goToCreate() {
      this.$router.push('/kb-create/publish');
    },
    goToLibrary() {
      this.$router.push('/kb-library/all');
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  // 新增的平台核心功能样式
  .platform-core {
    background-color: #f5f7fa;
    padding: 20px 0;
    margin-top: -20px;
  }

  .banner {
    position: relative;
    margin-bottom: 20px;
  }
  .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .section {
    background-color: #ffffff;
    padding: 0 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  }
  .category-tabs {
    margin: 0 auto;
  }

  .knowledge-list {
    padding: 20px;
  }
  .knowledge-card {
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  .knowledge-card:hover {
    transform: translateY(-5px);
  }
  .card-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
  }
  .card-content {
    padding: 14px;
  }
  .card-title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card-author {
    font-size: 12px;
    color: #909399;
    margin: 0 0 10px 0;
  }
  .card-stats {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #909399;
  }
  .card-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}
</style>
